<template>
  <el-dialog
    width="80%"
    :title="'新增处方'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      ref="dataForm"
      size="mini"
      :model="dataForm"
      label-width="110px"
    >
      <el-table
        v-loading="dataListLoading"
        highlight-current-row
        :data="dataList"
        border
        :default-sort="{prop: 'updateTime', order: 'ascending'}"
        style="width: 100%;"
        @selection-change="selsChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="sportProject"
          header-align="center"
          align="center"
          label="运动项目"
        />
        <el-table-column
          prop="sportDuration"
          header-align="center"
          align="center"
          label="运动时长"
        />
        <el-table-column
          prop="sportFrequency"
          header-align="center"
          align="center"
          label="运动频率"
        />
        <el-table-column
          prop="sportIntensity"
          header-align="center"
          align="center"
          label="运动强度"
        />
      </el-table>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="visible = false"
      >取消</el-button>
      <el-button
        size="small"
        type="primary"
        :loading="loading"
        :disabled="this.sels.length===0 || this.sels.length > 1"
        @click="dataFormSubmit()"
      >确定</el-button>
    </span>
    <perscription-exceptions-confirm
      v-if="perscriptionExceptionsConfirmVisible"
      ref="perscriptionExceptionsConfirm"
      @close="editClose"
      @success="editSuccess"
    />
  </el-dialog>
</template>

<script>
import perscriptionExceptionsConfirm from './perscriptionExceptions-confirm'
  export default {
  components: { perscriptionExceptionsConfirm },
    data () {
      return {
        visible: false,
        loading: false,
        dataList: [],
        dataListLoading: false,
        perscriptionExceptionsConfirmVisible: false,
        dataForm: {
          sportProject: '',
          sportDuration: '',
          sportFrequency: '',
          sportIntensity: ''
        },
        sels: []
      }
    },
    methods: {
      init () {
        this.visible = true
        this.$http({
          url: this.$http.requestUrl('/sport/prescriptionapi/infoList'),
          method: 'get',
          params: this.$http.requestParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.list
          }
        })
      },
      selsChange (sels) {
        this.sels = sels
      },
      editSuccess() {
        this.visible = false
        this.$emit('success')
      },
      dataFormSubmit () {
        var sportProject = this.sels.map(item => item.sportProject).toString()
        var sportDuration = this.sels.map(item => item.sportDuration).toString()
        var sportFrequency = this.sels.map(item => item.sportFrequency).toString()
        var sportIntensity = this.sels.map(item => item.sportIntensity).toString()
        this.perscriptionExceptionsConfirmVisible = true
        this.$nextTick(() => {
          this.$refs.perscriptionExceptionsConfirm.init(sportProject, sportDuration, sportFrequency, sportIntensity)
        })
      }
    }
  }
</script>
